<template>
  <uni-popup ref="popupRef" type="right" background-color="#fff">
    <view class="popup-box">
      <uni-forms class="form-card" ref="formRef"
                 label-position="top" label-width="400rpx" err-show-type="toast">
        <uni-forms-item name="lifePhotos" label="用户类型">
          <picker range-key="name" @change="userTypeChange" :value="userTypeIndex" :range="userTypeList">
            <view class="input-box">
              {{ userTypeText }}
            </view>
          </picker>
        </uni-forms-item>
      </uni-forms>
      <view class="btns-box">
        <view class="btn-item">
          <up-button type="primary" plain @tap="close">取 消</up-button>
        </view>
        <view class="btn-item">
          <up-button type="primary" @tap="confirm">搜 索</up-button>
        </view>
      </view>
    </view>
  </uni-popup>
</template>
<script setup>
const emits = defineEmits(['search'])
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {
    }
  }
})
const userTypeIndex = ref(0)
const userTypeList = ref([])
const userTypeText = ref('请选择')

const value = useModel(props, 'modelValue')

const popupRef = ref()
const open = () => {
  getusertype()
  popupRef.value.open()
}
const close = () => {
  popupRef.value.close()
}

// 用户类型修改
const userTypeChange = (e) => {
  userTypeText.value = userTypeList.value[e.detail.value].name
  value.value.user_type = userTypeList.value[e.detail.value].id
}
// 获取用户类型
const getusertype = async () => {
  const res = await qly.api.user.getusertype()
  if (res.code === 1) {
    userTypeList.value = res.data
  } else {
    qly.dialog.apiError(res).catch()
  }
}
const confirm = () => {
  emits('search', value.value)
  close()
}

defineExpose({
  open
})

</script>
<style scoped lang="scss">
.popup-box {
  position: relative;
  right: 0;
  height: 100%;
  width: 80vw;
  background: #fff;
  padding: 24rpx 24rpx 140rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  .form-card {
    flex: 1;
    overflow: auto;

    .input-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 48rpx 0 24rpx;
      width: 100%;
      height: 80rpx;
      background: #F5F5F5;
      border-radius: 16rpx;
      font-size: 32rpx;
      box-sizing: border-box;

      input {
        width: 100%;
      }

      .code-box {
        margin-right: 50rpx;
      }
    }
  }
  .btns-box{
    display: flex;
    align-items: center;
    gap: 24rpx;
    .btn-item{
      flex: 1;
    }
  }
}
</style>